<script setup lang="ts">
import { StarFilled } from '@element-plus/icons-vue'

interface Props {
  imageUrl: string
  text?: string
  title: string
  description?: string
}
const props = defineProps<Props>()
</script>

<template>
  <div class="flex flex-row">
    <div class="mr-5">
      <img :src="imageUrl" :alt="text" class="w-20 h-20">
    </div>
    <div class="pl-5 w-full h-auto flex flex-col">
      <div class="flex flex-row justify-between">
        <div class="text-xl font-bold">
          {{ title }}
        </div>
        <div><el-icon>
            <Files />
          </el-icon></div>
      </div>
      <div class="text-xs w-full flex flex-row justify-between items-center">
        <div class="w-7/10">
          <el-icon><StarFilled /></el-icon>
          <el-icon><StarFilled /></el-icon>
          <el-icon><StarFilled /></el-icon>
          <el-icon><StarFilled /></el-icon>
          <el-icon><StarFilled /></el-icon>
          4.9 月售15
        </div>
        <div class="w-3/10 bg-blue-500 text-white flex items-center justify-center">
          蜂鸟专送
        </div>
      </div>
      <div class="text-xs w-full flex flex-row justify-between items-center">
        <div>
          ￥15起送 | ￥3配送
        </div>
        <div>
          3.22km | 20分钟
        </div>
      </div>
      <div class="mt-2">
        <el-button>各种饺子</el-button>
      </div>
      <div class="text-xs w-full flex flex-row justify-between items-center mt-2">
        <div class="bg-orange-400 text-white rounded-2xl px-2 py-1">新</div>
        <div class="text-orange-500">特价商品5元起</div>
        <div>2个活动<el-icon>
            <ArrowDown />
          </el-icon></div>
      </div>
      <div class="text-xs w-full flex flex-row justify-between items-center mt-2">
        <div class="bg-orange-400 text-white rounded-2xl px-2 py-1">特</div>
        <div class="text-orange-500">饿了么新用户立减9元起</div>
        <div>2个活动<el-icon>
            <ArrowDown />
          </el-icon></div>
      </div>
    </div>
  </div>
  <el-divider>
    <el-icon><star-filled /></el-icon>
  </el-divider>
</template>
